<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义一个根标签,未来将利用react动态创建的元素插入到这个根标签中,从而渲染到页面上 -->
    <div id="root"></div>

    <!-- 2. 引入react.js和react-dom.js
        react.js是react提供的核心包 提供了对象和一些方法
        react-dom.js 是react提供的用来操作dom的包,主要帮我们操作dom对象.比如最终创建真正的dom对象并插入页面这个事情就是react-dom做的

        注意: 先引入react后引入react-dom.因为react-dom依赖react
        react.js提供了React对象
        react-dom.js提供了ReactDOM对象
    -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel是为了让babel帮我们编译jsx -->
    <script src="./js/babel.js"></script>

    <!-- 3. 根据需求,先创建虚拟dom -->
    <!-- 加了type属性,则表示这个script标签的代码需要被babel编译 -->
    <script type="text/babel">
      // 需求: div{123}+h1{哈哈哈}

      // jsx的注意点:
      // 1. 一段jsx,必须有一个父元素
      // 2. 写html标签时,要按照标准去写.比如,单标签要加结束的/
      // 3. jsx的注释不是//, 而是{/**/}

      const element = (
        <div>
          {/*这是jsx中的注释*/}
          <div>123</div> <h1>哈哈哈</h1>
          <input type="text" />
        </div>
      )

      //   4. 根据第三步已经创建出来的虚拟dom,生成真实dom,并插入到root中最终渲染到页面上
      ReactDOM.createRoot(document.getElementById('root')).render(element)
    </script>
  </body>
</html>
